<div class="content__title">
    <h1>
        Form Validation
        <small>Native Angular input validation</small>
    </h1>
    <div class="text-right">
        <button nz-button (click)="loadData()" [nzLoading]="loading">
            <span>Load User Data</span>
        </button>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <form nz-form [formGroup]="form" (ngSubmit)="_submitForm()">
                <fieldset>
                    <legend>Built-in</legend>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="nickname" nz-form-item-required>
                                <span>
                                    Nickname
                                    <nz-tooltip [nzTitle]="'What do you want other to call you'">
                                        <i nz-tooltip class="anticon anticon-question-circle-o"></i>
                                    </nz-tooltip>
                                </span>
                            </label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="nickname">
                            <nz-input formControlName="nickname" nzPlaceHolder="minlength=6" [nzId]="'nickname'"></nz-input>
                            <ng-container *ngIf="nickname.dirty || nickname.touched">
                                <p nz-form-explain *ngIf="nickname.errors?.required">Please input your nickname!</p>
                                <p nz-form-explain *ngIf="nickname.errors?.checked">Only input 'cipchk'</p>
                                <p nz-form-explain *ngIf="nickname.errors?.minlength">This field requires a min length</p>
                            </ng-container>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="email" nz-form-item-required>E-mail</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="email">
                            <nz-input formControlName="email" [nzId]="'email'"></nz-input>
                            <div nz-form-explain *ngIf="(email.dirty || email.touched) && email.errors?.email">The input is not valid E-mail!</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="password" nz-form-item-required>Password</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="password">
                            <nz-input formControlName="password" [nzType]="'password'" [nzId]="'password'"></nz-input>
                            <div nz-form-explain *ngIf="(password.dirty || password.touched) && password.errors?.required">Please input your password!</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="checkPassword" nz-form-item-required>Confirm Password</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="checkPassword">
                            <nz-input formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
                            <ng-container *ngIf="checkPassword.dirty || checkPassword.touched">
                                <p nz-form-explain *ngIf="checkPassword.errors?.required">Please confirm your password!</p>
                                <p nz-form-explain *ngIf="checkPassword.errors?.checked">Two passwords that you enter is inconsistent!</p>
                            </ng-container>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="phoneNumber" nz-form-item-required>Phone Number</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="phoneNumber">
                            <nz-input-group [nzCompact]="true">
                            <nz-select formControlName="phoneNumberPrefix" style="width: 25%;">
                                <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
                                <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
                            </nz-select>
                            <input formControlName="phoneNumber" id="'phoneNumber'" nz-input style="width: 75%;">
                            </nz-input-group>
                            <div nz-form-explain *ngIf="(phoneNumber.dirty || phoneNumber.touched) && phoneNumber.errors?.required">Please input your phone number!</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="website" nz-form-item-required>Website</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="website">
                            <nz-input formControlName="website" [nzId]="'website'"></nz-input>
                            <div nz-form-explain *ngIf="(website.dirty || website.touched) && website.errors?.required">Please input website!</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label nz-form-item-required>Status</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="status">
                            <nz-radio-group formControlName="status">
                                <label nz-radio [nzValue]="'normal'">
                                    <span>Normal</span>
                                </label>
                                <label nz-radio [nzValue]="'lock'">
                                    <span>Lock</span>
                                </label>
                                <label nz-radio [nzValue]="'deleted'">
                                    <span>Deleted</span>
                                </label>
                            </nz-radio-group>
                            <div nz-form-explain *ngIf="(status.dirty || status.touched) && status.errors?.required">Please choose status!</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label nz-form-item-required>date</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <div nz-col [nzSpan]="4">
                                <div nz-form-control [nzValidateStatus]="start">
                                    <nz-datepicker formControlName="start"></nz-datepicker>
                                    <div nz-form-explain *ngIf="(start.dirty || start.touched) && start.errors?.required">Select date</div>
                                </div>
                            </div>
                            <div nz-col [nzSpan]="1"><p nz-form-split>-</p></div>
                            <div nz-col [nzSpan]="4">
                                <div nz-form-control [nzValidateStatus]="end">
                                    <nz-datepicker formControlName="end"></nz-datepicker>
                                    <div nz-form-explain *ngIf="(end.dirty || end.touched) && end.errors?.required">Select date</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label for="captcha" nz-form-item-required>Captcha</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="captcha">
                            <div nz-row [nzGutter]="8">
                                <div nz-col [nzSpan]="12">
                                    <nz-input formControlName="captcha" [nzId]="'captcha'"></nz-input>
                                </div>
                                <div nz-col [nzSpan]="12">
                                    <button nz-button (click)="getCaptcha($event)">Get captcha</button>
                                </div>
                            </div>
                            <div nz-form-extra>We must make sure that your are a human.</div>
                            <div nz-form-explain *ngIf="(captcha.dirty || captcha.touched) && captcha.errors?.required">Please input the captcha you got!</div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Extended</legend>
                </fieldset>
                <div nz-form-item nz-row>
                    <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
                        <label nz-checkbox formControlName="agree">
                            <span>I have read the <a>agreement</a></span>
                        </label>
                    </div>
                </div>
                <div nz-form-item nz-row class="mb0">
                    <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
                        <button nz-button [nzType]="'primary'" [disabled]="form.invalid">Register</button>
                        <button nz-button (click)="form.reset()">Reset</button>
                    </div>
                </div>
            </form>
        </nz-card>
    </div>
</div>
